<!-- 学社 - 动态 - 回答 -->
<template>
  <view>
    <z-navbar title="回答问题" :border-bottom="true"></z-navbar>
    <view class="pt-2 px-4">
      <!-- 主体 -->
      <view class="mt-6 text-sm c-#666">
        回复
        <text class="c-#F4AF22 mr-2">@{{ state.questionDetail?.user?.nickname }}</text>
      </view>
      <!-- 标题 -->
      <view class="mt-2 mb-3 c-#333 text-sm font-bold">{{ state.questionDetail?.content }}</view>
      <u-line color="#E5E5E5" />
      <view class="relative">
        <image class="absolute top-40 left-0 w-28 h-24 z-2" src="/static/images/home/ic_edit.png"></image>
        <u-input v-model="state.content" type="textarea" height="240" auto-height placeholder="请输入回答内容"
          :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
        <view class="absolute bottom-30 right-0 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view>
        <u-line color="#E5E5E5" />
      </view>
      <view class="mt-4">
        <z-file-upload ref="uploader" width="144" height="144" maxCount="6" />
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="btn-submit" @click="onSubmit">回答</view>
    </view>
  </view>
</template>

<script setup>
import { refreshPrePage } from '@/common/util/util'
import { showToast, navigate,redirectTo } from '@/common/util/uni'
import { getQuestionDetail, postQuestionAnswer } from '@/common/http/module/society.js'

const uploader = ref()
const state = reactive({
  club_id: '', // 学社id
  question_id: '', // 问题id
  questionDetail: '', // 提问详情
  maxInputNum: 500,
  content: '',
})

const enteredNum = computed(() => {
  return state.content.length > 500 ? 500 : state.content.length
})

const inputStyle = {
  backgroundColor: '#fff',
  padding: '32rpx 0 60rpx 48rpx'
}


// 发布
function onSubmit () {
  if (!state.content) {
    showToast('请填写回答', 'error')
    return
  }
  const images = uploader.value.getUploadedList()
  postQuestionAnswer({
    club_id: state.club_id,
    question_id: state.question_id,
    content: state.content,
    slideshow: images.map(v => v.url).join(',')
  }).then((res) => {
    showToast('回答成功')
    refreshPrePage('refresh')
    setTimeout(() => {
      redirectTo(`/package_society/pages/trend/answer/detail?id=${res.data.answer_id}`)
    }, 600)
    // refreshPrePage('refresh')
    // uni.navigateBack()
  })
}

// 获取提问详情
async function loadData () {
  const { data } = await getQuestionDetail(state.question_id)
  console.log('问题详情', data);
  state.questionDetail = data
}

onLoad(options => {
  console.log('options', options);
  state.question_id = options.question_id ?? ''
  state.club_id = options.club_id
  loadData()
})
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #F6F6F6;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}
</style>

